import React, {Component} from 'react';
import logo from './logo.svg';
import './App.css';

// 页面组件 - start
import Lifecycle from './pages/week-1/Lifecycle'
import Communication from './pages/week-1/communication/Communication'
import Usual from './pages/week-1/hoc/Usual';
import Usual2 from './pages/week-1/hoc/Usual2';
import Usual3 from './pages/week-1/hoc/Usual3';

import Mobxtest from './pages/week-1/mobxtest';

import HTTPComponent from './pages/week-1/HTTPComponent';
import FormTest from './pages/week-2/FormTest';
import TableTest from './pages/week-2/TableTest';
import SwitchDemo from './pages/week-2/SwitchDemo';

import Reduxtest from './pages/week-3/reduxTest';

import LoginDemo from './pages/week-2/LoginModal/LoginModal';
// 页面组件 - end

// antd组件 - start
import {
  Button,
  Layout,
  Menu,
  Modal,
  Popover,
} from 'antd';

const {
  Header,
  Content,
  Footer,
  Sider,
} = Layout;

const {
  SubMenu,
} = Menu;
// antd组件 - end

const subs = [
  {
    name: '第一周',
    id: '1',
    tabs: [
      { name: '生命周期', id: '1-1' },
      { name: '组件数据交互', id: '1-2' },
      { name: 'Simple HOC', id: '1-3' },
      { name: 'MobX', id: '1-4' },
      { name: 'HTTP', id: '1-5' },
    ],
  },
  {
    name: '第二周',
    id: '2',
    tabs: [
      { name: 'Form组件', id: '2-1' },
      { name: 'Table组件', id: '2-2' },
      { name: 'MySwitch', id: '2-3' },
    ]
  },
  {
    name: '第三周',
    id: '3',
    tabs: [
      { name: 'Redux', id: '3-1' },
    ]
  },
]

const defaultSub = subs[subs.length-1];
const defaultTab = defaultSub.tabs[defaultSub.tabs.length-1];

class App extends Component {
  state = {
    subs,
    currentTabId: defaultTab.id,
    userName: '',
    loginModalVisible: false,
  }

  onLogin = (values) => {
    this.setState({
      userName: values.username,
      loginModalVisible: false,
    })
  }

  logout = () => {
    Modal.confirm({
      title: '确定要退出登录吗？',
      onOk: () => {
        this.setState({
          userName: '',
        })
      }
    })
  }

  changeTab = ({ key }) => {
    this.setState({
      currentTabId: key,
    })
  }

  render() {
    const userName = this.state.userName;

    return (
      <div className="App">
        <Layout style={{ minHeight: '100vh' }}>
          <Sider
            style={{
              position: 'fixed',
              left: 0,
              top: 0,
              height: '100vh',
              zIndex: 10,
            }}
            breakpoint="lg"
            collapsedWidth="0"
            onBreakpoint={broken => {
              // console.log(broken);
            }}
            onCollapse={(collapsed, type) => {
              // console.log(collapsed, type);
            }}
          >
            <div className="logo">
              <img src={logo} className="App-logo" alt="logo" />
            </div>
            <Menu
              theme="dark"
              mode="inline"
              defaultOpenKeys={ [defaultSub.id] }
              defaultSelectedKeys={ [defaultTab.id] }
              onSelect={this.changeTab}
            >
              {
                this.state.subs.map(sub => {
                  if (sub.tabs && sub.tabs.length) {
                    return (
                      <SubMenu
                        key={ sub.id }
                        title={ sub.name }
                      >
                        {
                          sub.tabs.map(tab => (
                            <Menu.Item key={ tab.id }>{ tab.name }</Menu.Item>
                          ))
                        }
                      </SubMenu>
                    );
                  } else {
                    return <Menu.Item key={ sub.id }>{ sub.name }</Menu.Item>
                  }
                })
              }
            </Menu>
          </Sider>
          <Layout style={{ marginLeft: 200 }}>
            <Header
              className="site-layout-sub-header-background"
              style={{ 
                textAlign: 'right',
              }}
            >
              {
                userName && (
                  <Popover content={<Button onClick={this.logout}>登出</Button>} trigger="hover" placement="bottom">
                    <span>{userName}</span>
                  </Popover>
                )
              }
              {
                !userName && <Button type="primary" onClick={() => this.setState({loginModalVisible: true})}>登录</Button>
              }
            </Header>
            <Content style={{ margin: '16px 16px 0' }}>
              <div
                className="site-layout-background"
                style={{
                  padding: 24,
                  minHeight: 400,
                  height: '100%',
                }}
              >
                {
                  this.state.currentTabId === '1-1' && <Lifecycle /> 
                }

                {
                  this.state.currentTabId === '1-2' && <Communication /> 
                }

                {
                  this.state.currentTabId === '1-3' && (
                    <div>
                      <Usual info='hello usual!' />
                      <Usual2 info='hello usual2!' />
                      <Usual3 info='hello usual3!' />
                    </div>
                  )
                }

                {
                  this.state.currentTabId === '1-4' && <Mobxtest />
                }

                {
                  this.state.currentTabId === '1-5' && <HTTPComponent />
                }

                {
                  this.state.currentTabId === '2-1' && <FormTest />
                }

                {
                  this.state.currentTabId === '2-2' && <TableTest />
                }

                {
                  this.state.currentTabId === '2-3' && <SwitchDemo />
                }
                
                {
                  this.state.currentTabId === '3-1' && <Reduxtest />
                }

              </div>
            </Content>
            <Footer style={{ textAlign: 'center' }}>Let's Go ©2020 Let's Go</Footer>
          </Layout>
        </Layout>

        <LoginDemo onLogin={this.onLogin} loginModalVisible={this.state.loginModalVisible}/>
      </div>
    );
  }
}

export default App;
